<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      //声明虚拟 DOM 对象  大括号中可以编写 JS 的表达式
      // 字面量, 变量, 对象属性, 运算, 函数调用
      //1. 大括号中能编写哪些类型的值  number, string, object, boolean, null, undefined symbol
      // n s o b n u s  => 去重 => n s o b u => usonb
      // var div = <div>{undefined}</div>;
      // var div = <div>{'iloveyou'}</div>;  //√
      // var div = <div>{Symbol()}</div>; 
      // var div = <div>{{a: 100, b: 200}}</div>;//报错  //Objects are not valid as a React child
      // var div = <div>{true}</div>; 
      // var div = <div>{false}</div>; 
      // var div = <div>{null}</div>; 
      // var div = <div>{618}</div>; //√
      // var div = <div>{React.createElement('h2',null, '测试')}</div>; //√
      // var div = <div>{<h2>测试2</h2>}</div>; //√
      // var div = <div><h2>测试2</h2></div>; //√
      // var div = <div>{[1,2,3, 'love', <h2>哈喽</h2>]}</div>; 
      // var div = <div>{[1,2,3]}</div>
      // var div = <div>{123}</div>;

      //标签属性设置的情况
      // var h2 = <h2 name={undefined}>测试文本</h2>  //该属性不会被渲染
      // var h2 = <h2 name={'精神点'}>测试文本</h2>   //会渲染
      // var h2 = <h2 name={''}>测试文本</h2>   //会渲染
      // var h2 = <h2 name={Symbol()}>测试文本</h2>  //不会渲染
      // var h2 = <h2 name={{a: 100, b: 200}}>测试文本</h2> //会渲染, 会渲染成[object Object], 不会报错
      // var h2 = <h2 name={1314}>测试文本</h2> //会渲染,
      // var h2 = <h2 name={NaN}>测试文本</h2> //会渲染
      // var h2 = <h2 name={null}>测试文本</h2> //不会渲染
      // var h2 = <h2 name={false}>测试文本</h2> //不会渲染
      // var h2 = <h2 name={[1,2,3]}>测试文本</h2> //会渲染

      //其他表达式
      // var arg = 'xxx';
      // var h2 = <div>{1 + 521}</div>
      // var h2 = <div>{arg}</div>;
      // var h2 = <div>{arg = '你好'}</div>;
      // var h2 = <div>{arg === '你好'}</div>;
      // var h2 = <div>{'xxx'.slice(0,2)}</div>;
      // var h2 = <div>{'a-b-c'.split('-')}</div>;
      // var h2 = <div>{Array.name}</div>;
      var h2 = <div title={null}>{Array.name}</div>;

      //渲染
      ReactDOM.render(h2, document.querySelector('#root'));
      
    </script>
  </body>
</html>
